<template>
	<view class="container">

		<!-- <view class="bg"></view> -->
		<view class="main">
			<view class="userinfo">
				<image class="avatar" src="/static/guarantee.png"></image>
				<view class="font-size-lg mb-10">为确保通告和约拍顺利进行</view>
				<view class="font-size-lg mb-20">部分通告和约拍需要缴纳保证金才可以报名</view>
			</view>
			<view class="code-section">
				<view class="font-weight-bold" style="padding: 50rpx;"> <text class="mr-10" style="font-size:100rpx">99</text> <text style="font-size:50rpx">元</text></view>
				<view class="save-btn">
					<button v-if='userInfo.is_guaranty==1' class="mb-10" type="info" @tap="refund">退款保证金</button>
					<button v-else class="mb-10" type="info" @tap="pay">立即存入</button>
					<navigator url="/pages/guarantee/details" hover-class="none">
						<view class="text-color-assist text-center" style="text-decoration: underline;">保证金明细</view>
					</navigator>
				</view>
				<view class="tips font-size-base">
					<view class='mb-10'>在没有任何通告合作情况下，保证金可随时退款，不收取任何相关费用。存入保证金即同意以下内容：</view>
					<view>1.在通告过程中，不会有恶意欺骗行为。</view>
					<view>2.联系确认已经达成拍摄约定后，不会随意毁约。</view>
					<view>3.报名网拍的麻豆需在规定时间内完成通告的拍摄要求。</view>
					<view>4.再对方没有同意的情况下，不会公开对方的隐私。</view>
					<view class="mt-10">如果违反了其中一条，经客服同双方调查确认之后，服务商有权扣除保证金来补偿损失方。</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				
			}
		},
		onShow() {

		},
		computed:{
			...mapState(['userInfo']),
		},
		methods: {
			...mapMutations(['setUserInfo']),
			pay() {
				uni.showLoading({
					mask: true,
					title: '生成担保中...'
				});
				uni.hideLoading();
			},
			refund() {
				let that = this;
				uni.showModal({
					title: '确定退款保证金？',
					content: '退款保证金之后将会影响到部分通告和约拍的报名！',
					confirmText:'继续退款',
					cancelText:'取消',
					success: function (res) {
						if (res.confirm) {
							uni.showLoading({
								mask: true,
								title: '担保退款中...'
							});
							let userInfo = that.userInfo;
							userInfo.is_guaranty = 0;
							uni.setStorageSync("userInfo", userInfo)
							that.setUserInfo(userInfo);
							that.$u.toast("担保退款成功！")
							setTimeout(function() {
								uni.hideLoading();
								uni.navigateBack();
							}, 3000);
						} 
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
}

.bg {
	background-color: #424141;
	height: 25vh;
	/* #ifdef H5 */
	height: calc(25vh - 44px);
	/* #endif */
}

.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-top: 100rpx;
}

.userinfo {
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: 1rpx solid rgba($color: $border-color, $alpha: 0.6);
	
	.avatar {
		position: relative;
		width: 140rpx;
		height: 140rpx;
		border-radius: 100%;
		margin-bottom: 40rpx;
	}
	
	.username {
		font-size: $font-size-extra-lg;
		font-weight: bold;
		margin-bottom: 50rpx;
	}
}

.code-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.tips {
		padding: 0 50rpx;
		color: $text-color-assist;
	}
}
.save-btn {
	margin-bottom: 100rpx;
	width: 80%;
	
	button {
		width: 100%;
		font-size: $font-size-extra-lg;
	}
}
</style>
